<template>
  <div class="chat-page-editor-components no-drag">
    <div class="btns-container flex-between">
      <div class="left flex-center">
        <i class="iconfont icon-biaoqing"></i>
        <i class="iconfont icon-wenjianjia"></i>
        <i class="iconfont icon-xinxi-"></i>
      </div>
      <div class="right flex-center">
        <i class="iconfont icon-icon_yuyinshipin_24_lan"></i>
      </div>
    </div>
    <div
      class="edit-content"
      contenteditable
      @input="
        (e) => {
          message = e.target.innerText
        }
      "
      @keyup.enter="sendMessage"
    >
      {{ message }}
    </div>
    <div class="footer">
      <div class="send-btn" @click="sendMessage">发送(S)</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
const emits = defineEmits(['sendMessage'])
const sendMessage = () => {
  emits('sendMessage', {
    id: -1,
    avatar: 'https://eryatalk.oss-cn-beijing.aliyuncs.com/webchat/%E6%9D%8E%E7%81%AB%E6%97%BA.jpeg',
    name: '李火旺',
    message: message.value,
    messageType: 1,
    time: Date.now()
  })
  message.value = ''
}
</script>
<style lang="less" scoped>
.chat-page-editor-components {
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 0 20px;
  .btns-container {
    height: 35px;
    .iconfont {
      font-size: 20px;
      margin-right: 15px;
      cursor: pointer;
    }
  }
  .edit-content {
    flex: 1;
    font-size: 15px;
    overflow-y: auto;
    &:focus-visible {
      outline: none;
    }
  }
  .footer {
    display: flex;
    // align-items: center;
    justify-content: flex-end;
    height: 40px;
    .send-btn {
      cursor: pointer;
      font-size: 14px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #07c160;
      background-color: #e9e9e9;
      border-radius: 3px;
    }
  }
}
</style>
